<template>
  <view class="swiper-item">
    <view class="flex flex-align-center">
      <view class="w-100">
        <uv-tabs
          :list="tabList"
          style="flex: 1"
          :current="current"
          :scrollable="false"
          @change="change"
        >
        </uv-tabs>
      </view>
    </view>
    <view class="list-container" v-show="current === 0">
      <view class="user" v-for="item in list" :key="item.id">
        <view class="flex just-b">
          <view class="m-b-5">
            <uv-text :text="`${item.servicename}（${item.price}）`"></uv-text>
            <uv-text :text="`归属：${item.desc}`"></uv-text>
          </view>
          <view class="flex flex-c m-b-5">
            <text style="font-size: 15px; color: rgb(48, 49, 51)"
              >金额：{{ item.pay_money }}</text
            >
            <text style="font-size: 15px; color: rgb(48, 49, 51)"
              >佣金：{{ item.order_brokerage }}</text
            >
          </view>
        </view>
        <view class="flex">
          <uv-text
            :text="totime(item.create_time * 1000)"
            type="info"
            align="right"
          ></uv-text>
        </view>
      </view>
      <uv-skeletons
        v-for="(_, index) in Array(10)"
        :key="index"
        :loading="loading"
        :skeleton="skeleton"
      ></uv-skeletons>
      <uv-empty
        v-if="isNotEmpty"
        mode="list"
        icon="../../static/empty.png"
        width="220"
        height="251"
      ></uv-empty>
      <pagination :data="pageInfo" @page="changePage"></pagination>
    </view>
    <view class="map-container" v-show="current === 1">
      <channelOrderMap :user_id="channelID"></channelOrderMap>
    </view>
    <channelOrderReport
      v-if="current === 2"
      type="day"
      :pid="channelID"
    ></channelOrderReport>
    <channelOrderReport
      v-if="current === 3"
      type="month"
      :pid="channelID"
    ></channelOrderReport>
    <channelOrderTime
      v-if="current === 4"
      type="day"
      :pid="channelID"
    ></channelOrderTime>
  </view>
</template>

<script>
import { totime } from "@/utils/index";
import pagination from "@/components/pagination.vue";
//   import channelUserMap from './channel-user-map.vue'
//   import ChannelUserReport from './channel-user-report.vue'
//   import channelUserTime from './channel-user-time.vue'
import channelOrderMap from "./channel-order-map.vue";
import channelOrderReport from "./channel-order-report.vue";
import channelOrderTime from "./channel-order-time.vue";
export default {
  props: {
    channelID: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      current: 0,
      list: [],
      loading: false,
      isNotEmpty: false,
      sumData: {},
      pageInfo: {
        total: 0,
        per_page: 0,
        last_page: 0,
        current_page: 1,
      },
      tabList: [
        { name: "列表" },
        { name: "地图" },
        { name: "日报" },
        { name: "月报" },
        { name: "日期筛选" },
      ],
      skeleton: [
        {
          type: "line",
          num: 1,
          gap: "20rpx",
          style: ["height: 100rpx;margin-bottom: 10px"],
        },
      ],
    };
  },
  components: {
    pagination,
    channelOrderMap,
    channelOrderReport,
    channelOrderTime,
  },
  mounted() {
    this.getquerypuser();
  },
  methods: {
    totime,
    getquerypuser() {
      this.loading = true
      this.$http
        .http(
          "masterchannel/index/queryorder",
          {
            page: this.pageInfo.current_page,
            user_id: this.channelID,
          },
          "POST"
        )
        .then((res) => {
          this.loading = false
          this.list = res.data.data;
          this.isNotEmpty = res.data.total === 0;
          this.pageInfo.total = res.data.total;
          this.pageInfo.per_page = res.data.per_page;
          this.pageInfo.last_page = res.data.last_page;
          this.pageInfo.current_page = res.data.current_page;

          if (res.data.sum) {
            const [follow, register] = res.data.sum.reg.split("/");
            this.sumData = {
              ...res.data.sum,
              register,
              follow,
              money: parseFloat(res.data.sum.money).toFixed(2),
            };
          }
        });
    },
    change(val) {
      this.current = val.index;
    },
    changePage(val) {
      this.pageInfo.current_page = val;
      this.list = [];
      this.getquerypuser();
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper-item {
  height: 100%;
  box-sizing: border-box;
}
.user {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.list-container {
  height: calc(100vh - 90rpx - 400rpx);
  overflow: scroll;
}
.map-container {
  height: calc(100% - 150rpx);
  .map {
    height: calc(100% - 30px);
  }
}
:deep(.uv-tabs__wrapper__nav__item__text) {
  word-break: keep-all;
}
.flex {
  display: flex;
}
.just-b {
  justify-content: space-between;
}
.flex-align-center {
  align-items: center;
}
.m-r-20 {
  margin-right: 20rpx;
}
.w-100 {
  width: 100%;
}
.flex-c {
  flex-direction: column;
}
.m-b-5 {
  margin-bottom: 5rpx;
}
</style>
